<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/add.css"/>
	</head>
	<body>
		<div id="app">
			<div class="header">
				<span>添加快递员</span>
			</div>
			<div class="content">
				<table>
					<tr>
						<td class="text-right">姓名</td><td class="content_right"><input id="name" class="input" placeholder="请输入姓名"></td>
					</tr>
					<tr>
						<td class="text-right">手机号码</td><td class="content_right"><input id="phone" class="input" placeholder="请输入手机号码"></td>
					</tr>
					<tr>
						<td class="text-right">身份证号码</td><td class="content_right"><input id="number" class="input" placeholder="身份证号码"></td>
					</tr>
					<tr>
						<td class="text-right">密码</td><td class="content_right"><input class="input" placeholder="密码"></td>
					</tr>
					<tr>
						<td></td><td class="content_right"><span id="submit" class="btn btn-info">立即提交</span> <span id="reset" class="btn">重置</span> </td>
					</tr>
				</table>
				
				
			</div>
		</div>
		<script src="../../assets/layui.all.js"></script>
		<script src="/js/jquery.min.js"></script>
		<script src="/layer/layer.js"></script>
		<script>
			var form = layui.form
					,layer = layui.layer;
		</script>
		<script>
			$(function () {
				var username;
				var userPhone;
				var userNumber;
				$("#name").blur(function () {
					username = $("#name").val();
					$.getJSON("/courier/checkName.do",{username:username},function (data) {

						if (data.status == -1) {
							layer.tips(data.result,'#name');
							$("#name").html("");
						}
					});
				});
				$("#phone").blur(function () {
					userPhone = $("#phone").val();
					$.getJSON("/courier/checkPhone.do",{userPhone:userPhone},function (data) {
						if (data.status == -1) {
							layer.tips(data.result,'#phone');
							$("#phone").html("");
						}
					});
				});
				$("#number").blur(function () {
					userNumber = $("#number").val();
					$.getJSON("/courier/checkNumber.do",{userNumber:userNumber},function (data) {
						if (data.status == -1) {
							layer.tips(data.result,'#number');
							$("#number").html("");
						}
					});
				});
				$("#submit").click(function () {
					var windowId = layer.load();
					username = $("input:eq(0)").val();
					userPhone = $("input:eq(1)").val();
					userNumber = $("input:eq(2)").val();
					var password = $("input:eq(3)").val();
					console.log(username);

					if (!isPhoneNo(userPhone)){
						layer.close(windowId);
						layer.msg("请输入正确的手机号码",function () {

						});
					}if (!isCardNo(userNumber)){
						layer.close(windowId);
						layer.msg("请输入正确的身份证号",function () {

						});
					}if (!isChinaName(username)){
						layer.close(windowId);
						layer.msg("请输入正确的姓名",function () {

						});
					}

					if (username == "" || userPhone == "" || userNumber == "" || password == ""){
						layer.close(windowId);
						layer.msg("必填项不能为空",function () {

						});
					}
					if (isPhoneNo(userPhone) && isCardNo(userNumber) && isChinaName(username)){

						$.getJSON("/courier/insert.do",{
							username:username,
							userPhone:userPhone,
							userNumber:userNumber,
							password:password
						},function (data) {
							layer.close(windowId);
							layer.msg(data.result);
							if (data.status == 0) {
								$("input").val("");
							}else{

							}
						});
					}
				});

				$("#reset").click(function(){
					$("input").val("");
				});


			});

			// 验证中文名称
			function isChinaName(name) {
				var pattern = /^[\u4E00-\u9FA5]{1,6}$/;
				return pattern.test(name);
			};

			//验证手机号码格式
			function isPhoneNo(phone) {
				var pattern = /^1[34578]\d{9}$/;
				return pattern.test(phone);
			};

			// 验证身份证
			function isCardNo(card) {
				var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				return pattern.test(card);
			};
		</script>
	</body>
</html>
